<template>
  <main>
    <div class="common-layout">
      <el-container>
        <el-header>
          <!--          <Top/>-->
        </el-header>
        <el-container>
          <el-aside>
            <!--            <Menu/>-->
          </el-aside>
          <el-main>
            <!--搜索框-->
            <el-row class="search">
              <el-col :span="6">
                <el-input v-model="supplierName" style="width: 80%" placeholder="供应商名称" clearable/>
              </el-col>
              <el-col :span="6">
                <el-select v-model="querySelect" placeholder="Select" style="width: 201px">
                  <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
                <el-input v-model="queryInput" style="width: 201px" placeholder="" clearable/>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" @click="addOpen">新增供应商</el-button>
              </el-col>
              <el-col :span="6" >
                <el-button type="success" @click="query">搜索</el-button>
              </el-col>
            </el-row>
            <div style="height: 20px;"></div>

            <!-- 表格 -->
            <el-table ref="tableRef" :data="dynamicList" border style="width: 100%">

              <el-table-column prop="id" label="序号" fixed="left" width="80" />
              <el-table-column prop="supplierName" label="供应商名称" width="100" />
              <el-table-column prop="contacts" label="联系人" width="100" />
              <el-table-column prop="contactPhone" label="联系电话" width="180" />
              <el-table-column prop="contactAddress" label="联系地址" width="180" />
              <el-table-column prop="accountNo" label="开户账号" width="180" />
              <el-table-column label="操作" default="scope">
                <template #default="scope">
                  <el-button type="success"  @click="updateOpen(scope.row)">修改</el-button>
<!--                  <el-button type="success"  @click="selectJump(scope.row)">选用供应商品</el-button>-->

                  <el-button type="warning"  @click="selectOpen(scope.row)">选用供应商品</el-button>
                  <el-button type="danger"  @click="del(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background
                           layout="total, sizes, prev, pager, next, jumper"
                           v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[2,5, 10, 50]"
                           :total="total"
                           @size-change="query"
                           @current-change="query"/>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </main>


  <el-dialog
      v-model="addDialogVisible"
      title="新增供应商"
      width="500"
  >
    <el-form ref="addFormRef"  :model="addForm.addData" label-width="90" >

      <el-form-item label="供应商名称" prop="supplierName" >
        <el-input v-model="addForm.addData.supplierName" placeholder="supplierName" />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts" >
        <el-input v-model="addForm.addData.contacts" placeholder="contacts" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone" >
        <el-input v-model="addForm.addData.contactPhone" placeholder="contactPhone" />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="contactEmail" >
        <el-input v-model="addForm.addData.contactEmail" placeholder="contactEmail" />
      </el-form-item>
      <el-form-item label="联系地址" prop="contactAddress" >
        <el-input v-model="addForm.addData.contactAddress" placeholder="contactAddress" />
      </el-form-item>
      <el-form-item label="开户银行" prop="bankOfDeposit" >
        <el-input v-model="addForm.addData.bankOfDeposit" placeholder="bankOfDeposit" />
      </el-form-item>
      <el-form-item label="开户账号" prop="accountNo" >
        <el-input v-model="addForm.addData.accountNo" placeholder="accountNo" />
      </el-form-item>



    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetAdd">重置</el-button>
        <el-button type="primary" @click="addBrand">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>



  <el-dialog
      v-model="updateDialogVisible"
      title="修改供应商信息"
      width="500"
  >
    <el-form ref="updateFormRef"  :model="updateForm.updateData" label-width="90" >
      <el-form-item label="供应商名称" prop="supplierName" >
        <el-input v-model="updateForm.updateData.supplierName" placeholder="supplierName" />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts" >
        <el-input v-model="updateForm.updateData.contacts" placeholder="contacts" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone" >
        <el-input v-model="updateForm.updateData.contactPhone" placeholder="contactPhone" />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="contactEmail" >
        <el-input v-model="updateForm.updateData.contactEmail" placeholder="contactEmail" />
      </el-form-item>
      <el-form-item label="联系地址" prop="contactAddress" >
        <el-input v-model="updateForm.updateData.contactAddress" placeholder="contactAddress" />
      </el-form-item>
      <el-form-item label="开户银行" prop="bankOfDeposit" >
        <el-input v-model="updateForm.updateData.bankOfDeposit" placeholder="bankOfDeposit" />
      </el-form-item>
      <el-form-item label="开户账号" prop="accountNo" >
        <el-input v-model="updateForm.updateData.accountNo" placeholder="accountNo" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetupdate">重置</el-button>
        <el-button type="primary" @click="updateSubmit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="selectGoodsDialogVisible1"
      title="选用供应商品"
      width="500"
  >
    <el-button type="danger"  @click="selectGoodsList()">选择商品</el-button>
    <div style="height: 20px;"></div>
    <el-table ref="tableRef" :data="dynamicList2" border style="width: 100%">

      <el-table-column prop="id" label="商品序号" fixed="left" width="50" />
      <el-table-column prop="gname" label="商品名称" width="180" />
      <el-table-column prop="marketPrice" label="采购价" width="70" />
      <el-table-column prop="shopPrice" label="市场价" width="70" />
      <el-table-column label="操作" default="scope">
        <template #default="scope">
          <el-button type="danger"  @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>


  <el-dialog
      v-model="goodsListDialogVisible"
      title="商品管理列表"
      width="1000"
  >
    <el-row class="search">
    <el-col :span="6">
      <el-select v-model="querySelect" placeholder="Select" style="width: 120px">
        <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-col>
    <el-col :span="6" >
      <el-button type="success" @click="query2">搜索</el-button>
    </el-col>
    </el-row>
    <div style="height: 20px;"></div>
    <el-table ref="tableRef" :data="dynamicList3" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" fixed="left" width="80" />
      <el-table-column prop="gname" label="商品名称" width="100" />
      <el-table-column prop="typeName" label="商品分类" width="100" />
      <el-table-column prop="marketPrice" label="采购价" width="100" />
      <el-table-column prop="gbrand" label="商品品牌" width="100" />
      <el-table-column prop="gmodel" label="商品型号" width="100" />
      <el-table-column prop="minStock" label="商品最低库存数量" width="150" />
      <el-table-column prop="gcolor" label="商品颜色" width="100" />'
    </el-table>


    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
// import Top from '../../components/Top.vue'
// import Menu from '../../components/Menu.vue'
import {ref, reactive, getCurrentInstance, onMounted, nextTick} from "vue";
import router from '@/router/index.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from '@/plugins/axios.js'

/*
* 公共变量
* */
const {proxy} = getCurrentInstance()



/**
 * 添加商品
 */
// let addFirstGoods = () => {
//   router.push({path: '/goods/addFirstGoods'})
// }
// let addSecondGoods = () => {
//   router.push({path: '/goods/addGoods'})
// }

const addFormRef = ref()
const addDialogVisible = ref(false)
const addForm = reactive({addData:{
    supplierName:'',
    contacts:'',
    contactPhone:'',
    contactEmail:'',
    contactAddress:'',
    bankOfDeposit:'',
    accountNo:'',

  }})

const addOpen = ()=>{
  addDialogVisible.value = true;
  nextTick(()=>{
    addFormRef.value.resetFields();
  })


}
const addBrand = ()=>{
  addDialogVisible.value = false;
  let params = JSON.stringify(addForm.addData);
  //操作数据 刷新页面数据
  operationData("goodsSupplier/addSupplier",params)


}
const resetAdd = ()=>{
  addFormRef.value.resetFields();
}



/**
 * 搜索
 * @type {Ref<UnwrapRef<*[]>>}
 */
const queryForm = ref({
  color:'',
  type:''
})
/**
 *
 * 下拉框
 */

const supplierName = ref("")
const contacts = ref("")






/****************************************** **/


let dynamicList = ref([])
let dynamicList2 = ref([])
let dynamicList3 = ref([])



// let start_time = ref("")
// let end_time = ref("")
let total = ref(0)
let pageNum = ref(1)
let pageSize = ref(10)
let upsuccess = () => {
  ElMessage({
    type: "success",
    message: "上传成功"
  })
}
let uperror = () => {
  ElMessage({
    type: "danger",
    message: "上传失败"
  })
}


let queryInput = ref("")
let querySelect = ref("")

let query = () => {
  let url = "/goodsSupplier/list";
  let param = {
    "pageSize": pageSize.value,
    "pageNum": pageNum.value,
    "supplierName": supplierName.value,
    "queryInput":queryInput.value,
    "querySelect":querySelect.value
  }
  //console.log(param)
  axios.postJson(url, param).then(result => {
    //console.log("------------结果是"+result.data.records.typeName)
    dynamicList.value = result.data.records;

    //首次查询直接给更新表单赋值
    //updateForm.value=result.data.records;
    // console.log(updateForm.gname+"----------------------修改表单的值")
    total.value = result.data.total;
  })

}
/**
 * 商品管理列表
 */
const gcolor1 = ref("")
const gbrand = ref("")
const typeName = ref("")
let gname = ref("")
let gmodel = ref("")
const goodsListDialogVisible = ref(false)

let selectGoodsList = () => {
  selectGoodsDialogVisible1.value =false
  goodsListDialogVisible.value = true
  let url = "/goods/list";
  let param = {
    "pageSize": pageSize.value,
    "pageNum": pageNum.value,
    "gname": gname.value,
    "gmodel": gmodel.value,
    "gcolor": gcolor1.value,
    "typeName": typeName.value,
    "gbrand": gbrand.value
  }
  axios.postJson(url, param).then(result => {
    //console.log("------------结果是"+result.gbrand)
    dynamicList3.value = result.data.records;

    //首次查询直接给更新表单赋值
    // updateForm.value=result.data.records;
    // console.log(updateForm.gname+"----------------------修改表单的值")
    total.value = result.data.total;
  })

}
const selectOpen2 = (currentRow)=>{
  selectGoodsDialogVisible1.value = true
  checkList1.id = currentRow.id
  let url = "/goodsSupplier/getGoodsBySid";
  let param = {
    "id": currentRow.id
  }

  axios.postJson(url, param)
      .then(resp=>{
        dynamicList2.value = resp.data;
        //console.log("----------------------"+resp.data)
        tempUpdateData = JSON.parse(JSON.stringify(resp.data));
      })
}


let query2 = () => {
  let url = "/goods/list";
  let param = {
    "pageSize": pageSize.value,
    "pageNum": pageNum.value,
    "typeName": querySelect.value,
  }
  //console.log(param)
  axios.postJson(url, param).then(result => {
    //console.log("------------结果是"+result.data.records.typeName)
    dynamicList3.value = result.data.records;
    //首次查询直接给更新表单赋值
    //updateForm.value=result.data.records;
    // console.log(updateForm.gname+"----------------------修改表单的值")
    total.value = result.data.total;
  })

}

const addSubmit = ()=>{


  let selectionRows = tableRef.value.getSelectionRows()

  if(selectionRows.length>0){
    let listGidArr = [];
    tableRef.value.getSelectionRows().forEach((data)=>{
      listGidArr.push(data.id)
    })
    let paramStr = listGidArr.join(",")
    console.log("++++++++++++"+paramStr)

    let param={
      "id":checkList1.id,
      "listGid":paramStr
    }
    ElMessageBox.confirm(
        `确定添加编号为[${paramStr}]的数据么`,
        '添加',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        }
    )
        .then(() => {
          console.log('发送ajax请求添加数据')

          operationData("goodsSupplier/addGoods",param)

        })
        .catch(() => {
          ElMessage.info("取消添加")
        })
  }else{
    ElMessage.warning("请先选择数据...")
  }


}



/**
 * 选择商品类型
 */
const selectTypeFormRef = ref()
const selectGoodsDialogVisible1 = ref(false)
//const checkList = ref([rowId:  " ",'', ''])

const checkList1 = reactive({
      id: '',
    }

)

//const selectId = ref("")
const selectOpen = (currentRow)=>{
  selectGoodsDialogVisible1.value = true
  checkList1.id = currentRow.id
  let url = "/goodsSupplier/getGoodsBySid";
  let param = {
    "id": currentRow.id
  }

  axios.postJson(url, param)
      .then(resp=>{
        dynamicList2.value = resp.data;
        //console.log("----------------------"+resp.data)
        tempUpdateData = JSON.parse(JSON.stringify(resp.data));
      })
}

const selectSubmit = ()=>{
  selectBrandDialogVisible.value = false;
  // console.log(checkList1)
  // console.log(checkList1.brandList)
  let url = "/goodsType/updateBrandNameById";
  let params = JSON.stringify(checkList1)

  // let params = JSON.stringify(updateForm.updateData)
  // console.log("------------插入的数据是"+params)
  // //操作数据 刷新页面数据
  operationData(url,params)
}
/**
 * 修改功能
 *
 *
 *
 * */

const updateFormRef = ref()
const updateDialogVisible = ref(false)
const updateForm = reactive({updateData:{
    supplierName:'',
    contacts:'',
    contactPhone:'',
    contactEmail:'',
    contactAddress:'',
    bankOfDeposit:'',
    accountNo:'',
  }})

let tempUpdateData = {};

const updateOpen = (currentRow)=>{
  updateDialogVisible.value = true

  /*从服务接口取值*/
  let url = "/goodsSupplier/getById";
  let param = {
    "id": currentRow.id
  }
  axios.postJson(url, param)
      .then(resp=>{
        updateForm.updateData = resp.data;
        tempUpdateData = JSON.parse(JSON.stringify(resp.data));
      })
}

const updateSubmit = ()=>{
  updateDialogVisible.value = false;
  let params = JSON.stringify(updateForm.updateData)
  // console.log("------------修改数据是"+params)
  //操作数据 刷新页面数据
  operationData("goodsSupplier/updateSupplier",params)
}

const resetupdate = ()=>{

  updateForm.updateData = JSON.parse(JSON.stringify(tempUpdateData));

  updateFormRef.value.resetFields();

  console.log(tempUpdateData)

}

const options2 = [
  {
    value: 'supplierName',
    label: '供应商名称',
  },
  {
    value: 'contacts',
    label: '联系人姓名',
  },
  {
    value: 'contactPhone',
    label: '联系电话',
  },
  {
    value: 'contactAddress',
    label: '联系地址',
  },
  {
    value: 'accountNo',
    label: '开户账号',
  }
]

const options3 = [
  {
    value: '5G手机',
    label: '5G手机',
  },
  {
    value: '手机壳',
    label: '手机壳',
  },
  {
    value: '4G手机',
    label: '4G手机',
  },
  {
    value: '手机配件',
    label: '手机配件',
  },
  {
    value: '手机壳',
    label: '手机壳',
  },
  {
    value: '台式电脑',
    label: '台式电脑',
  },
  {
    value: '穿戴设备',
    label: '穿戴设备',
  },
  {
    value: '电脑音箱',
    label: '电脑音箱',
  }
]


/**
 * 删除功能
 *
 */
const tableRef = ref();
const del=(id)=>{
  //console.log(gid)

  ElMessageBox.confirm(
      `确定删除编号为[${id}]的数据么`,
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        console.log('发送ajax请求删除数据')
        let param = {
          "id": id
        }
        operationData("goodsSupplier/deleteSupplier",param)
      })
      .catch(() => {
        ElMessage.info("取消删除")
      })




}

/**
 * 公共方法
 */

/*
* 公共函数
* */
const queryData = (params)=>{
  proxy.$axios.get(`goods/list?${params}`)
      .then((resp)=>{
        if (resp.data.returnCode == 80011){
          //给table更新数据
          tableList.tableData =resp.data.returnData
          //给分页组件更新数据
          pageInfo.pageData = resp.data.pageInfo
          console.log("---=---"+pageInfo.pageData)
          console.log(tableList.tableData)
          // queryData(params)
        }else if(resp.data.returnCode == 80012){
          //如果没有数据 保证组件正常使用
          tableList.tableData = [];
          pageInfo.pageData ={page:1,pageSize:10,total:0}
        }

      })
}

const operationData=(url,params)=>{
  axios.postJson(url, params)
      .then(resp=>{
        //1.弹窗显示结果
        console.log(resp.data)
        if(resp.code == 200){
          ElMessage.success("操作成功!")
        }else {
          ElMessage.error("操作失败!")
        }
        //2.刷新数据
        query();
      })
}



onMounted(() => {
  query();
})
</script>

<style scoped>

</style>